<template>
  <div class="table-head">
    <a-card :bordered="false" :header-style="{ padding: '0 12px' }">
      <template #title> {{ t["广告列表"] }} </template>

      <a-form
        :model="{}"
        :wrapper-col-props="{ span: 4 }"
        :label-col-props="{ span: 2 }"
        label-align="left"
        auto-label-width
      >
        <a-row :gutter="12">
          <a-col :span="6">
            <a-form-item :label="t['广告名称']">
              <a-input v-model="query.name" allow-clear @clear="list" @keydown.enter="list" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <div class="flex gap-3">
              <a-button @click="list"> {{ t["刷新"] }}</a-button>
              <a-button type="primary" @click="list"> {{ t["查询"] }}</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>

      <div>
        <div class="flex gap-3">
          <a-button type="primary" @click="create">
            {{ t["新建"] }}
            <template #icon>
              <IconPlus />
            </template>
          </a-button>
          <a-button @click="list">{{ t["刷新"] }}</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { create, list } from "../data/curd";
import { query } from "../data/table";

const t = translate("公共模块");
</script>

<style lang="scss" scoped>
:deep(.arco-card-header) {
  border: none;
}
</style>
